<template>
  <div class="stock-container">
    <div id="stock">stock</div>
  </div>
</template>

<script>
import mixin from "../utils/mixin";
const verticalGradient = function (startColor, stopColor) {
  return {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: startColor, // 0% 处的颜色
      },
      {
        offset: 1,
        color: stopColor, // 100% 处的颜色
      },
    ],
  };
};
export default {
  mixins: [mixin],
  data() {
    return {
      curindex: 0,
      timerId: null,
      seriesArr: null,
    };
  },
  computed: {
    option() {
      return {
        series: this.seriesArr,
      };
    },
  },
  mounted() {
    this.init("stock", "api/stock");
    this.renderChart();
    this.myChart.on("mouseout", () => {
      this.startInterval();
    });
    this.myChart.on("mouseover", () => {
      clearInterval(this.timerId);
    });
    this.startInterval();
  },
  destroyed() {
    clearInterval(this.timerId);
  },
  methods: {
    dealData() {
      const centerArr = [
        ["18%", "40%"],
        ["50%", "40%"],
        ["82%", "40%"],
        ["34%", "75%"],
        ["66%", "75%"],
      ];
      const colorArr = [
        ["#4ff778", "#0ba82c"],
        ["#e5dd45", "#e8811c"],
        ["#e8821c", "#e55445"],
        ["#5052ee", "#ab6ee5"],
        ["#23e5e5", "#2e728f"],
      ];
      let start = this.curindex * 5;
      let end = (this.curindex + 1) * 5;
      let temp = this.originData.slice(start, end);
      // console.log(temp);
      // this.seriesArr = [];
      this.seriesArr = temp.map((item, index) => {
        return {
          type: "pie",
          radius: [this.baseSize * 2, this.baseSize * 2.24],
          center: centerArr[index],
          hoverAnimation: false, //
          label: {
            show: true,
            position: "center",
            color: colorArr[index][0],
            fontSize: this.baseSize / 2,
            formatter: item.name + "\n\n" + item.sales,
          },
          labelLine: {
            show: true,
          },
          data: [
            {
              value: item.sales,
              // name: item.name + "\n\n" + item.sales,
              itemStyle: {
                color: verticalGradient(...colorArr[index]),
              },
            },
            {
              value: item.stock,
              itemStyle: {
                color: "#333843",
              },
            },
          ],
        };
      });
      // console.log(this.seriesArr);
    },
    startInterval() {
      this.timerId = setInterval(() => {
        this.curindex++;
        if (this.curindex > 1) this.curindex = 0;
        this.dealData();
        this.updateChart();
        // console.log(this.option);
        // this.myChart.setOption(this.option);
      }, 3000);
    },
  },
};
</script>

<style lang="less" scoped>
.stock-container {
  width: 100%;
  height: 100%;
  #stock {
    width: 100%;
    height: 100%;
  }
}
</style>